<template>
	<div class="newsinfo-container">
		<h3 class="title">{{ photoinfo.title }}</h3>
		<p class="subtitle">
			<span>发表时间：{{ photoinfo.add_time }}</span>
			<span>点击：{{ photoinfo.click }}次</span>
		</p>
		<hr>
		<vue-preview :slides="slide1" @close="handleClose"></vue-preview>
		<div class="content" v-html="photoinfo.text"></div>
		<comment-box :id="this.id"></comment-box>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	import comment from '../subcomponents/comment.vue'
	export default {
		data() {
			return {
				id: this.$route.params.id,
				photoinfo:{},
				slide1: [
//				          {
//				            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
//				            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
//				            alt: 'picture1',
//				            title: 'Image Caption 1',
//				            w: 600,
//				            h: 400
//				          },
//				          {
//				            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
//				            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
//				            alt: 'picture2',
//				            title: 'Image Caption 2',
//				            w: 1200,
//				            h: 900
//				          }
				        ]
			}
		},
		created() {
			this.getPhotoInfo();
		},
		methods: {
			getPhotoInfo() {
				this.$http.get('data.php').then(result => {
					if(result.body.status == true) {
						//											console.log(result.body.news_datas)
						this.photoinfo = result.body.news_datas[this.id];
//																	console.log(result.body.news_datas[this.id])
						this.slide1 = result.body.news_datas[this.id].suo;
						console.log(this.slide1);
					} else {
						Toast('获取图片详细信息失败...');
					}
				})
			},
			handleClose () {
		        console.log('close event')
		      }
		},
		components:{
			"comment-box":comment
		}
	}
</script>

<style lang="scss">
	.newsinfo-container {
		padding: 0 15px;
		.title {
			width: 100%;
			font-size: 16px;
			text-align: center;
			margin: 15px 0;
			color: rgb(38,162,255);
			text-overflow: ellipsis;
			overflow: hidden;
			white-space:nowrap;
		}
		.subtitle {
			font-size: 13px;
			color: rgb(38,162,255);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		.content {
			text-indent: 1em;
			font-size: 12px;
			color: #666;
			img{
				width: 100%;
				margin-top: 5px;
			}
		}
	}
</style>